{{--极光推送列表页--}}
@extends('admin.layouts.indexList')
@section('content')

    <link rel="stylesheet" href="{{asset('src/css/customerservicedesk.css')}}">
    <div class="box">
        {{--左侧好友列表--}}
        <div class="dialogue_list">
            <ul id="dialogue_list_ul">
                @foreach($friend_lists as $v)
                    <a href="{{route('admin.customerServiceDesk.index',['addressee_id'=>$v['sender_id']])}}">
                        <li>
                            <img src="{{asset('src/images/pic/pic_1.jpeg')}}" alt="">
                            <div class="right">
                                <div>
                                    <p>用户#{{$v['sender_id']}}</p>
                                    @if($v['comments_count'])
                                    <span>{{$v['comments_count']}}</span>
                                        @else
                                        <i></i>
                                    @endif
                                </div>
                                @if($v['message_type'] == 'text')
                                <p class="p_content">{{$v['content']['content']}}</p>
                                    @else
                                    <p class="p_content">文件</p>
                                @endif
                            </div>
                        </li>
                    </a>
                @endforeach
            </ul>
        </div>

        {{--右侧页头+聊天窗+常用功能--}}
        <div class="rigth_section">
            {{--页头--}}
            <div class="top_box">
                <ul>
                    <li>
                        <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">问题归档</a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="layui-icon layui-icon-service"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="layui-icon layui-icon-error"></i>
                        </a>
                    </li>
                </ul>
            </div>
            {{--聊天窗+常用功能--}}
            <div class="bottom_box">
                {{--聊天窗口--}}
                <div class="chat_box">
                    {{--聊天记录--}}
                    <div class="chatting_records_box">
                        @foreach($chat_records as $v)
                            @php $date = date('H:i', strtotime($v['created_at'])); @endphp
                            @if($v['sender_id'] != $waiter_bind_id)
                                {{--左边-好友消息--}}
                                @switch($v['message_type'])
                                    @case('images')
                                    {{--好友信息-images--}}
                                    <div class="left_msg_box msg_box">
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                        <div class="msg_text">
                                            <a href="{{$v['content']['content']['ol_url']}}" target="_blank">
                                                <img src="{{$v['content']['content']['ol_url']}}" alt="">
                                            </a>
                                        </div>
                                    </div>
                                    @break

                                    @case('link')
                                    {{--对方信息-link--}}
                                    <div class="left_msg_box msg_box">
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                        <div class="msg_link">
                                            <img src="{{$v['content']['content']['ol_cover_url']}}" alt="">
                                            <div class="right">
                                                <p class="title">{{$v['content']['content']['title']}}</p>
                                                <span class="describe">{{$v['content']['content']['describe']}}</span>
                                                <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" href="{{$v['content']['content']['link']}}">查看详情</a>
                                            </div>
                                        </div>
                                    </div>
                                    @break

                                    @default
                                    <div class="left_msg_box msg_box">
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                        <div class="msg_text msg_text_left">
                                            <p>{{$v['content']['content']}}</p>
                                        </div>
                                    </div>
                                @endswitch
                            @else
                                {{--右边-自己发的消息--}}

                                {{--左边-好友消息--}}
                                @switch($v['message_type'])
                                    @case('images')
                                    {{--我方信息-images--}}
                                    <div class="right_msg_box msg_box">
                                        <div class="msg_text msg_img_right">
                                            <a href="{{$v['content']['content']['ol_url']}}" target="_blank">
                                                <img src="{{$v['content']['content']['ol_url']}}" alt="">
                                            </a>
                                        </div>
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                    </div>
                                    @break

                                    @case('link')
                                    {{--我方信息-link--}}
                                    <div class="right_msg_box msg_box">
                                        <div class="msg_link">
                                            <img src="{{$v['content']['content']['ol_cover_url']}}" alt="">
                                            <div class="right">
                                                <p class="title">{{$v['content']['content']['title']}}</p>
                                                <span class="describe">{{$v['content']['content']['describe']}}</span>
                                                <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" href="{{$v['content']['content']['link']}}">查看详情</a>
                                            </div>
                                        </div>
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                    </div>
                                    @break

                                    @default
                                    {{--我方信息-text--}}
                                    <div class="right_msg_box msg_box">
                                        <div class="msg_text msg_text_right">
                                            <p>{{$v['content']['content']}}</p>
                                        </div>
                                        <div class="pic">
                                            <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                            <span>{{$date}}</span>
                                        </div>
                                    </div>
                                @endswitch

                            @endif
                        @endforeach
                            {{--左边-好友消息--}}
                            {{--好友信息-text--}}
                            <div class="left_msg_box msg_box">
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                                <div class="msg_text msg_text_left">
                                    <p>
                                        这时候我注视着眼前的雨水，心里想着，下吧、下吧,随便你下到哪一天,大地要再度绚丽光彩起来,经这时候我注视着眼前的雨水经这时候我注视着眼前的雨水经这时候我注视着眼前的雨水，心里想着，下吧、下吧,随便你下到哪一天,大地要再度绚丽光彩起来,经</p>
                                </div>
                            </div>
                            {{--我方信息-text--}}
                            <div class="right_msg_box msg_box">
                                <div class="msg_text msg_text_right">
                                    <p>
                                        这时候我注视着眼前的雨水，心里想着，下吧、下吧,随便你下到哪一天,大地要再度绚丽光彩起来,经这时候我注视着眼前的雨水经这时候我注视着眼前的雨水经这时候我注视着眼前的雨水，心里想着，下吧、下吧,随便你下到哪一天,大地要再度绚丽光彩起来,经</p>
                                </div>
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                            </div>
                            {{--对方信息-link--}}
                            <div class="left_msg_box msg_box">
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                                <div class="msg_link">
                                    <img src="{{asset('src/images/test/hua.jpeg')}}" alt="">
                                    <div class="right">
                                        <p class="title">标题,标题,标题,标题标题,标题,标题,标题</p>
                                        <span class="describe">描述,描述,描述,描述,描述,描述,描述,描述描述,描述,描述,描述,描述,描述,描述,描述</span>
                                        <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">查看详情</a>
                                    </div>
                                </div>
                            </div>
                            {{--我方信息-link--}}
                            <div class="right_msg_box msg_box">
                                <div class="msg_link">
                                    <img src="{{asset('src/images/test/hua.jpeg')}}" alt="">
                                    <div class="right">
                                        <p class="title">标题,标题,标题,标题标题,标题,标题,标题</p>
                                        <span class="describe">描述,描述,描述,描述,描述,描述,描述,描述描述,描述,描述,描述,描述,描述,描述,描述</span>
                                        <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">查看详情</a>
                                    </div>
                                </div>
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                            </div>
                            {{--好友信息-images--}}
                            <div class="left_msg_box msg_box">
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                                <div class="msg_text">
                                    <a href="ol_url" target="_blank">
                                        <img src="ol_url" alt="">
                                    </a>
                                </div>
                            </div>
                            {{--我方信息-images--}}
                            <div class="right_msg_box msg_box">
                                <div class="msg_text msg_img_right">
                                    <a href="ol_url" target="_blank">
                                        <img src="ol_url" alt="">
                                    </a>
                                </div>
                                <div class="pic">
                                    <img src="{{asset('src/images/pic/pic_2.jpeg')}}" alt="">
                                    <span>12:38</span>
                                </div>
                            </div>
                    </div>
                    {{--输入框盒子--}}
                    <div class="input_box">
                        <ul class="top_box">
                            <li>
                                <a href="#" onclick="emojiFadeToggle()">
                                    <img src="{{asset('src/images/system/xiaolian.png')}}" alt="表情">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="ID-upload-demo-btn">
                                    <img src="{{asset('src/images/system/tupian.png')}}" alt="图片">
                                </a>
                            </li>
                            {{--表情列表--}}
                            <div class="emoji_box" style="display: none">
                                <i class="clse layui-icon layui-icon-error" style="font-size: 30px;font-weight: 600; color: #b30000;" onclick="emojiFadeToggle()"></i>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128512;')">&#128512;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128513;')">&#128513;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128514;')">&#128514;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128515;')">&#128515;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128516;')">&#128516;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128517;')">&#128517;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128518;')">&#128518;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128519;')">&#128519;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128520;')">&#128520;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128521;')">&#128521;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128522;')">&#128522;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128523;')">&#128523;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128524;')">&#128524;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128525;')">&#128525;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128526;')">&#128526;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128527;')">&#128527;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128528;')">&#128528;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128529;')">&#128529;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128530;')">&#128530;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128531;')">&#128531;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128532;')">&#128532;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128533;')">&#128533;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128534;')">&#128534;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128535;')">&#128535;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128536;')">&#128536;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128537;')">&#128537;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128538;')">&#128538;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128539;')">&#128539;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128540;')">&#128540;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128541;')">&#128541;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128542;')">&#128542;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128543;')">&#128543;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128544;')">&#128544;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128545;')">&#128545;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128546;')">&#128546;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128547;')">&#128547;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128548;')">&#128548;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128549;')">&#128549;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128550;')">&#128550;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128551;')">&#128551;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128552;')">&#128552;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128553;')">&#128553;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128554;')">&#128554;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128555;')">&#128555;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128556;')">&#128556;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128557;')">&#128557;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128558;')">&#128558;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128559;')">&#128559;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128560;')">&#128560;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128561;')">&#128561;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128562;')">&#128562;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128563;')">&#128563;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128564;')">&#128564;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128565;')">&#128565;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128566;')">&#128566;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128567;')">&#128567;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128568;')">&#128568;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128569;')">&#128569;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128570;')">&#128570;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128571;')">&#128571;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128572;')">&#128572;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128573;')">&#128573;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128574;')">&#128574;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128575;')">&#128575;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128576;')">&#128576;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128577;')">&#128577;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128578;')">&#128578;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128579;')">&#128579;</a>
                                <a href="javascript:void(0);"onclick="selectEmoji('&#128580;')">&#128580;</a>
                            </div>
                        </ul>
                        <div class="centre_box">
                            <textarea class="" name="coutent" id="coutent" maxlength="240" placeholder="写点什么..."></textarea>
                        </div>
                        <div class="bottmo_box">
                            <button id="send" type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" onclick="sendText()">发送</button>
                        </div>
                    </div>

                </div>
                {{--常用功能--}}
                <div class="commonly_box"></div>
            </div>
        </div>

    </div>


@endsection

@section('index_script')
    <script>
        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: "{{route('common.uploadFileOss')}}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                data: {'_token': '{{csrf_token()}}', 'dir': 'chat_records/content'},
                done: function (res) {
                    console.log(res);
                    // 若上传失败
                    if (res.code != 200) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    sendImages(res.data.ol_url,res.data.url)//发送图片
                },
            });
        });

        scrollHeight()

        //将滚动条移动到底部
        function scrollHeight() {
            var element = $(".chatting_records_box");
            element.scrollTop(element.prop("scrollHeight"));
        }

        //获取当前时间
        function getTime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var time = hours + ':' + (minutes < 10 ? '0' + minutes : minutes);
            return time;
        }

        /**
         * emoji_表情列表淡入淡出切换
         */
        function emojiFadeToggle() {
            $('.emoji_box').fadeToggle();
        }

        /**
         * 选中emoji表情添加到文本域
         */
        function selectEmoji(emoji) {
            $("#coutent").val(function (i, val) {
                return val + emoji;
            });
        }


        var bind_id ;//发件人id(binding_records表id)
        var addressee_id = "{{$addressee_id}}";//收件人id(binding_records表id)
        /**
         * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
         * 其中端口为Gateway端口，即start_gateway.php指定的端口。
         * start_gateway.php 中需要指定websocket协议，像这样
         * $gateway = new Gateway(websocket://0.0.0.0:8282
         */
        // var ws = new WebSocket("ws://jim.liutong.pro:8282");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
        var ws = new WebSocket("{{config('gateway_worker.ws_url')}}");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
        //检测websocket是否链接
        ws.onopen = function () {
            console.log("连接成功");
        };
        // 关闭 websocket
        ws.onclose = function () {
            console.log("连接已关闭...");
        };
        // 收到服务端主动推送消息时会触发这里的onmessage
        ws.onmessage = function (e) {
            // json数据转换成js对象
            var data = eval("(" + e.data + ")");
            var type = data.type || '';
            var html = "";
            console.log(data,111);
            console.log(type,222);
            console.log(bind_id,333);
            switch (type) {
                // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
                case 'init':
                    // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                    binding(data.client_id)
                    break;
                case 'binding_success'://监听绑定成功信息
                    console.log(data);
                    break;
                case 'text'://监听文字类型消息
                    //朋友来消息了
                    //收件人id==当前登录用户id
                    if (data.addressee_id == bind_id){
                        html = "<div class=\"left_msg_box msg_box\">\n" +
                            "                            <div class=\"pic\">\n" +
                            "                                <img src=\"{{asset('src/images/pic/pic_2.jpeg')}}\" alt=\"\">\n" +
                            "                                <span>"+getTime()+"</span>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"msg_text msg_text_left\">\n" +
                            "                                <p>" + data.content + "</p>\n" +
                            "                            </div>\n" +
                            "                        </div>"
                    }
                    break;
                // 当mvc框架调用GatewayClient发消息时直接alert出来
                case 'images'://监听图片类型消息
                    //收件人id==当前登录用户id
                    if (data.addressee_id == bind_id){
                        console.log('images=' + data.content);
                        html  = " <div class=\"left_msg_box msg_box\">\n" +
                            "                            <div class=\"pic\">\n" +
                            "                                <img src=\"{{asset('src/images/pic/pic_2.jpeg')}}\" alt=\"\">\n" +
                            "                                <span>"+getTime()+"</span>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"msg_text\">\n" +
                            "                                <a href=\""+data.content.ol_url+"\" target=\"_blank\">\n" +
                            "                                    <img src=\""+data.content.ol_url+"\" alt=\"\">\n" +
                            "                                </a>\n" +
                            "                            </div>\n" +
                            "                        </div>"
                    }
                    break;
                // 当mvc框架调用GatewayClient发消息时直接alert出来
                default :
                    alert(e.data);
            }

            $('.chatting_records_box').append(html);
            scrollHeight()//聊天记录显示最新一条
        };

        //
        /**
         * 初始化绑定用户
         * @param string client_id gatwaywork给的用户id
         */
        function binding(client_id) {
            $.ajax({
                url: "{{route('chat.binding')}}", // 请求的 URL
                type: 'POST', // 请求方法
                data: {
                    '_token': '{{csrf_token()}}',
                    'client_id': client_id,//wensocket临时id标识
                    'user_id': "{{$user_id}}",//当前登录的用户id
                    'role': 1//用户角色|1:客服,2:用户
                },
                dataType: 'json', // 响应数据类型
                success: function (res) { // 请求成功的回调函数
                    if(res.code != 200){
                        return layer.msg('IM链接失败');
                    }
                    bind_id = res.data.bind_id
                },
                error: function (xhr, status, error) { // 请求失败的回调函数
                    console.log(error);
                }
            });
        }

        //发送文字消息
        function sendText() {
            let content = $('#coutent').val();
            if (!content) {
                return layer.msg('请填写内容');
            }

            $.ajax({
                url: "{{route('chat.sendMassage')}}", // 请求的 URL
                type: 'POST', // 请求方法
                data: {
                    '_token': '{{csrf_token()}}',
                    'bind_id': bind_id,//当前用户id
                    'role':1,//用户身份,1:客服,2:用户
                    'addressee_id':addressee_id,//收件人id
                    'type':'text',//消息类型
                    'content':content,//消息内容
                },
                dataType: 'json', // 响应数据类型
                success: function (res) { // 请求成功的回调函数
                    console.log(res);
                    let html = "<div class=\"right_msg_box msg_box\">\n" +
                        "                            <div class=\"msg_text msg_text_right\">\n" +
                        "                                <p>" + content + "</p>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"pic\">\n" +
                        "                                <img src=\"{{asset('src/images/pic/pic_2.jpeg')}}\" alt=\"\">\n" +
                        "                                <span>" + getTime() + "</span>\n" +
                        "                            </div>\n" +
                        "                        </div>"
                    $('.chatting_records_box').append(html);
                    $('#coutent').val('');
                    scrollHeight()//将滚动条移动到底部
                },
                error: function (xhr, status, error) { // 请求失败的回调函数
                    console.log(error);
                }
            });

        }

        //发送图片类型请求
        function sendImages(ol_url,url) {
            if (!ol_url || !url) {
                layer.msg('发送图片失败');
                return false;
            }
            $.ajax({
                url: "{{route('chat.sendMassage')}}", // 请求的 URL
                type: 'POST', // 请求方法
                data: {
                    '_token': '{{csrf_token()}}',
                    'bind_id': bind_id,//当前用户id
                    'role':1,//用户角色|1:客服,2:用户
                    'addressee_id':addressee_id,//收件人id
                    'type':'images',//消息类型
                    'content':{'ol_url':ol_url,'url':url},//消息内容
                },
                dataType: 'json', // 响应数据类型
                success: function (res) { // 请求成功的回调函数
                    console.log(res);
                    if (res.code != 200){
                        return layer.msg('发送失败');
                    }
                    let html = " <div class=\"right_msg_box msg_box\">\n" +
                        "                            <div class=\"msg_text msg_img_right\">\n" +
                        "                                <a href=\"" + ol_url + "\" target=\"_blank\">\n" +
                        "                                    <img src=\"" + ol_url + "\" alt=\"\">\n" +
                        "                                </a>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"pic\">\n" +
                        "                                <img src=\"{{asset('src/images/pic/pic_2.jpeg')}}\" alt=\"\">\n" +
                        "                                <span>"+getTime()+"</span>\n" +
                        "                            </div>\n" +
                        "                        </div>";
                    $('.chatting_records_box').append(html);
                    scrollHeight()//将滚动条移动到底部
                },
                error: function (xhr, status, error) { // 请求失败的回调函数
                    console.log(error);
                }
            });
        }
    </script>
@endsection
